<template>
    <el-form v-model="form" label-width="120px" size="mini">
        <el-form-item label="执行方式">
            <el-radio-group v-model="form.isSequential">
                <el-radio :label="true">串行</el-radio>
                <el-radio :label="false">并行</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="类型">
            <el-radio-group :value="completionType">
                <el-radio-button :label="true" @click.native="completionTypeChange(true)">百分百</el-radio-button>
                <el-radio-button :label="false" @click.native="completionTypeChange(false)">实例数</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <template v-if="collectionEdit">
            <el-form-item label="集合">
                <el-input v-model="form.collection"></el-input>
            </el-form-item>
            <el-form-item label="元素变量">
                <el-input v-model="form.elementVariable"></el-input>
            </el-form-item>
        </template>
        <el-form-item label="完成条件">
            <el-input v-model="conditionNumber">
                <template slot="append">{{completionType?'%':'同意数'}}</template>
            </el-input>
        </el-form-item>
    </el-form>
</template>
<script>
    import mixins from '../mixins'
    export default {
        mixins: [mixins],
        components: {},
        props:{
            collectionEdit:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                conditionNumber:'',
                form: {
                    isSequential: false,
                    completionCondition:'',
                    collection:'',
                    elementVariable:'',
                },
            }
        },
        computed:{
            //通过条件是否是按百分比
            completionType(){
                return this.form.completionCondition.indexOf('nrOfInstances')!==-1
            }
        },
        methods: {
            //切换通过条件百分比与实例数时赋值默认值
            completionTypeChange(val){
               if(val){
                   this.form.completionCondition = '${nrOfCompletedInstances/nrOfInstances >= 1}'
               }else {
                   this.form.completionCondition = '${nrOfCompletedInstances >= 1}'
               }
               this.initConditionNumber()
            },
            //初始化输入框的值
            initConditionNumber(){
              if(this.completionType){
                 this.conditionNumber =  Number.parseFloat(this.getRate()) * 100
              } else {
                  this.conditionNumber = this.getCompletedInstances()
              }
            },
            //获取比例
            getRate(){
                return /\$\{nrOfCompletedInstances\/nrOfInstances >= (.*)\}/.exec(this.form.completionCondition)[1].trim()
            },
            //获取实例数
            getCompletedInstances(){
                return /\$\{nrOfCompletedInstances >= (.*)\}/.exec(this.form.completionCondition)[1].trim()
            },
        },
        watch: {
            form:{
                deep:true,
                handler:function(newV,oldV){
                    this.$emit('input',{...newV})
                }
            },
            //根据输入框的值填充通过条件
            conditionNumber(val){
                if(this.completionType){
                    this.form.completionCondition = '${nrOfCompletedInstances/nrOfInstances >= '+val/100+'}'
                }else {
                    this.form.completionCondition = '${nrOfCompletedInstances >= '+val+'}'
                }
            }
        },
        mounted() {

        },
        created() {
            this.definitions = {
                ...this.definitions,
                completionCondition: {
                    type:'bpmn:Expression',
                    field:'body',
                }
            }
            this.init('form',this.form,true)
            if(this.form.completionCondition ===''){
                this.form.completionCondition='${nrOfCompletedInstances/nrOfInstances >= 0.50}'
            }
            this.initConditionNumber()
        }
    }
</script>
<style lang="scss" scoped>
    .el-form {
        background-color:rgb(240, 242, 245);
        .el-form-item__label {
            font-weight: 700;
        }
    }
</style>
